<template>
  <el-card style="margin: 10px 0px;">
    <!-- 顶部结构 -->
    <div class="top">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="销售额" name="0"></el-tab-pane>
        <el-tab-pane label="访问量" name="1"></el-tab-pane>
      </el-tabs>
      <div class="right">
        <span @click="setToday">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMouth">本月</span>
        <span @click="setYear">本年</span>
        <!-- 日历 -->
        <el-date-picker value-format="YYYY-MM-DD" v-model="timeArr" size="small" type="daterange" range-separator="|"
          start-placeholder="入住日期" end-placeholder="离开日期" />
      </div>
    </div>
    <!-- 底部 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <v-charts :option=getOptions() style="height: 300px;"></v-charts>
      </el-col>
      <el-col :span="6">
        <h1>门店{{ activeName == '0' ? '销售额' : '访问量' }}排名</h1>
        <ul>
          <li v-for="(item, index) in activeName == '0' ? MockStore.MackObj.orderRank : MockStore.MackObj.userRank"
            :key="index">
            <span :class="{ active: index < 3 }">{{ item.no }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.count }}.00</span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue';
import UseMockStore from '@/stores/mock';


const MockStore = UseMockStore()
//选项卡收集数据
const activeName = ref<any>('0')
//收集日历的数据
const timeArr = ref<any>([]);
//今日按钮
const setToday = () => {
  //处理日历的插件:moment|dayjs
  const start = dayjs().format('YYYY-MM-DD');
  const end = dayjs().format('YYYY-MM-DD');
  timeArr.value = [start, end];
}
// 本周按钮
const setWeek = () => {
  const start = dayjs().day(1).format('YYYY-MM-DD')
  const end = dayjs().day(7).format('YYYY-MM-DD')
  timeArr.value = [start, end];
}
// 本月按钮
const setMouth = () => {
  const start = dayjs().startOf('month').format('YYYY-MM-DD')
  const end = dayjs().endOf('month').format('YYYY-MM-DD')
  timeArr.value = [start, end]
}
// 年的按钮
const setYear = () => {
  const start = dayjs().startOf('year').format('YYYY-MM-DD');
  const end = dayjs().endOf('year').format('YYYY-MM-DD');
  timeArr.value = [start, end];
}

// 左侧柱状图
let getOptions = () => {
  return {
    title: {
      text: activeName == '0' ? '销售额' : '访问量',
      left: 'center',
      textStyle: {
        color: 'yellowgreen'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // 网格布局
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    // X轴
    xAxis: [
      {
        type: 'category',
        data:MockStore.MackObj.orderFullYearAxis,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    // Y轴
    yAxis: {
      //轴线
      axisLine: {
        show: true
      },
      //刻度
      axisTick: {
        show: true
      },
      //分割线不要
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data:activeName.value == '0' ? MockStore.MackObj.orderFullYear : MockStore.MackObj.userFullYear,
        //每一个柱条的颜色
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
            }, {
              offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        //柱条的文字标签
        label: {
          show: true,
          position: 'insideTop'
        }
      }
    ]
  }
}





</script>
<script lang="ts">
export default {
  name: 'Middle'
}
</script>

<style scoped lang="scss">
.top {
  position: relative;

  .right {
    position: absolute;
    right: 0;
    top: 8px;

    span {
      color: yellowgreen;
      margin: 0px 5px;
      font-size: 14px;
    }
  }
}



//左侧tab文字颜色
// /deep/ - less
//>>>    原生css
//::v-deep()
::v-deep(.el-tabs__item) {
  color: yellowgreen;
}

::v-deep(.el-tabs__active-bar) {
  background: yellowgreen !important;
}

ul {
  li {
    list-style: none;
    margin: 8px;
    display: flex;
    justify-content: space-between;

    span {
      // width: 17px;
      height: 17px;
      border-radius: 50%;

      // line-height: 17px;
      &.active {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background: black;
        color: wheat;
        text-align: center;
      }
    }
  }
}
</style>